<template>
  <f-form-layout
    @change="handleChange"
    ref="form"
    :model="model"
    :columns="columns"
  >
  </f-form-layout>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useFormLayoutContext } from "../../packages/hooks/form";
import FormLayout from "../../packages/components/formLayout/index";

const { addHook } = useFormLayoutContext();
const columns = ref([
  { required: true, label: "字段1", field: "sub1" },
  { required: true, label: "字段2", field: "sub2" },
  { required: true, label: "字段3", field: "sub3" },
  { required: true, label: "字段4", field: "sub4" },
]);
const form = ref<InstanceType<typeof FormLayout>>();
const model = ref({});

addHook("validate", (...args) => {
  return form.value?.validate(...args);
});
addHook("resetFields", () => {
  form.value?.resetFields();
});
const emits = defineEmits(["update:value", "change"]);
const props = defineProps<{ value: Record<string, string> }>();
watch(
  () => props.value,
  (value) => {
    console.log("sub form:", value);
    model.value = value;
  }
);
const handleChange = (key, value, data) => {
  console.log(data);
  emits("change", data);
  emits("update:value", data);
};
</script>
